<!-- 重名检测 -->
<template>
  <div class="app-container">
    <div style="width: 80%">
      <el-form ref="formData" :model="formData" label-width="80px" :rules="formRules">
        <el-form-item label="省份" prop="province">
          <el-select v-model="formData.province" placeholder="请选择省份">
            <el-option v-for="province in provinceList" :key="province.code" :label="province.name" :value="province.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入姓名" style="width: 40%">
            <el-button slot="append" icon="el-icon-search" @click="search" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="result" style="width: 80%;padding-left: 30px;">
      <p>查询结果：</p>
      <p>{{ result.province }}常住人口中， {{ result.name }} 共有 <span style="color: red">{{ result.total }}</span> 人同名</p>
      <p v-if="result.man != null">其中男性 <span style="color: red">{{ result.man }}</span> 人，女性 <span style="color: red">{{ result.woman }}</span> 人</p>
      <p style="font-size: 12px;">数据来自{{ result.province }}公安厅</p>
    </div>
  </div>
</template>

<script>
export default {

  components: {},
  data() {
    return {
      provinceList: [],
      formData: {
        province: '',
        name: ''
      },
      result: null,
      formRules: {
        name: [
          { required: true, message: '请输入姓名' }
        ],
        province: [
          { required: true, message: '请选择省份' }
        ]
      }
    }
  },
  mounted() {
    this.findProvinceList()
  },
  methods: {
    findProvinceList() {
      this.$api.doublename.findProvinceList().then(res => {
        this.provinceList = res.data
      })
    },
    search() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          const params = {
            province: this.formData.province,
            name: this.formData.name
          }
          this.$api.doublename.query(params).then(res => {
            this.result = res.data
          })
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
